<template>
  <el-card>
    <div slot="header">
      <span>{{ title }}</span>
    </div>
    <el-divider content-position="left">考察计划信息</el-divider>
    <el-row>
      <el-form
        class="table_form_wrap"
        ref="planForm"
        :model="planForm"
        label-width="140px"
      >
        <el-col :span="12">
          <el-form-item label="计划名称" prop="planName">
            <el-input v-model.trim="planForm.planName" readonly />
          </el-form-item>
          <el-form-item label="计划时间" prop="planTime">
            <el-date-picker
              readonly
              v-model="planForm.planTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="出差地点" prop="businessTripPlace">
            <el-input v-model.trim="planForm.businessTripPlace" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交通工具" prop="vehicle">
            <el-select v-model.trim="planForm.vehicle" disabled>
              <el-option
                v-for="item in vehicleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="计划拟定人" prop="createUser">
            <el-input readonly v-model.trim="planForm.createUser" />
          </el-form-item>
          <el-form-item label="出差人员" prop="personListStr">
            <el-input readonly v-model="planForm.personListStr" />
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-divider content-position="left">工作任务明细</el-divider>
    <el-row>
      <basic-table
        showActionCol
        :showSelectCol="false"
        :showPagination="false"
        :loading="tableInfo.loading"
        :columns="tableInfo.columns"
        :dataSource="tableInfo.list"
        :actionRender="renderTableBtnAction"
      >
      </basic-table>
    </el-row>
    <el-row type="flex" justify="center" class="footer">
      <el-button @click="handleCancel">取消</el-button>
    </el-row>
  </el-card>
</template>
<script>
import BasicTable from '@/components/supplier/BasicTable';
import { queryPlanDetailService } from '@api/supplier/returnVisteManage';
import { isResponseSuccess } from '@/pages/supplier/utils/bizUtils';
import { AUDIT_STATUS } from '@/pages/supplier/constants/returnVisteManage';
import { WHETHER_OR_NOT_OPTIONS, VEHICLE_OPTIONS } from './constants';
import {
  JOB_TITLE_SELECT_LIST,
  INSPECTION_TARGET_OPTIONS,
  INSPECTION_TYPE_OPTIONS
} from '@/pages/supplier/constants/common';
import { list2Obj } from '@/pages/supplier/utils';

export default {
  components: {
    BasicTable
  },
  data () {
    return {
      type: null,
      planState: null,
      id: null,
      vehicleOptions: VEHICLE_OPTIONS, // 交通工具
      whetherOrNotOptions: WHETHER_OR_NOT_OPTIONS,
      planForm: {
        id: '',
        planName: '', // 计划名称
        planCode: '', // 计划编码
        planTime: '',
        startTime: '', // 计划开始时间
        endTime: '', // 计划开始时间
        businessTripPlace: '', // 出差地点
        vehicle: '', // 交通工具
        personList: [], // 出差人员
        personListStr: '', // 出差人员
        detailList: [], // 工作明细 考察详情
        createUser: '', // 计划拟定人
        createUserId: '' // 计划拟定人
      },
      tableInfo: {
        list: [],
        loading: false,
        columns: []
      }
    };
  },
  computed: {
    title () {
      return '考察计划信息';
    }
  },
  created () {
    const { id, type, planState } = this.$route.query;
    this.id = id;
    this.type = type;
    this.planState = planState;
    if (id) {
      this.initTableCloumns();
      this.getDetailData();
    }
  },
  methods: {
    // 表格操作列
    // { label: '待提交', value: 1 },
    // { label: '审核中', value: 10 },
    // { label: '审核通过', value: 20 },
    // { label: '审核驳回', value: 30 },
    // { label: '撤回', value: 40 }
    renderTableBtnAction (h, { row }) {
      let action = '';
      action = (
        <div class="table-action">
          {this.planState == 20 && (row.status == 1 || row.status == 30) ? (
            <el-button
              size="mini"
              type="text"
              onClick={() => this.editReport(row)}
            >
              编辑报告
            </el-button>
          ) : null}
          {(this.type == 'view' || this.planState == 20) &&
          (row.status == 10 || row.status == 20) ? (
              <el-button
                size="mini"
                type="text"
                onClick={() => this.viewReport(row)}
              >
              查看报告
              </el-button>
            ) : null}
        </div>
      );
      return action;
    },
    initTableCloumns () {
      this.tableInfo.columns = [
        {
          title: '供应商分类',
          key: 'supplierClassifyName'
        },
        {
          title: '供应商名称',
          key: 'supplierName'
        },
        {
          title: '考察类型',
          key: 'inspectType',
          formatter: (row, columns, cellValue) => {
            return list2Obj(INSPECTION_TYPE_OPTIONS)[cellValue];
          }
        },
        {
          title: '供应商联系人',
          key: 'contactName'
        },
        {
          title: '联系电话',
          key: 'contactPhone'
        },
        {
          title: '职务',
          key: 'contactPosition',
          formatter: (row, columns, cellValue) => {
            return list2Obj(JOB_TITLE_SELECT_LIST)[cellValue];
          }
        },
        {
          title: '详细地址',
          key: 'registerAddress'
        },
        {
          title: '供应商性质',
          key: 'supplierNatureName'
        },
        {
          title: '现阶段合作情况',
          key: 'situation'
        },
        {
          title: '考察目的',
          key: 'target'
        },
        {
          title: '是否新渠道',
          key: 'newChannel',
          formatter: (row, columns, cellValue) => {
            return list2Obj(WHETHER_OR_NOT_OPTIONS)[cellValue];
          }
        },
        {
          title: '是否已报价',
          key: 'quote',
          formatter: (row, columns, cellValue) => {
            return list2Obj(WHETHER_OR_NOT_OPTIONS)[cellValue];
          }
        },
        {
          title: '报价单',
          key: 'quoteFile',
          render: (h, { row }) => {
            return (
              <a
                onClick={() => {
                  this.downLoadFile(row.quoteFile);
                }}
              >
                {row.quoteFile.split('/').pop()}
              </a>
            );
          }
        },
        {
          title: '审批状态',
          key: 'status',
          formatter: (row, columns, cellValue) => {
            return list2Obj(AUDIT_STATUS)[cellValue];
          }
        }
      ];
    },
    // 下载附件
    downLoadFile (quoteFile) {
      window.location.href = `${
        this.exportBaseURL
      }/srm-admin/annex/download?fullPath=${quoteFile}&fileName=${quoteFile
        .split('/')
        .pop()}`;
    },
    initPersonListStr () {
      this.planForm.personListStr = this.planForm.personList
        .map((item) => item.personName)
        .join(',');
    },
    // 获取详情
    getDetailData () {
      queryPlanDetailService({ id: this.id }).then((res) => {
        if (isResponseSuccess(res)) {
          const { result } = res;
          this.planForm = result;
          if (result.startTime) {
            this.$set(this.planForm, 'planTime', [
              result.startTime,
              result.endTime
            ]);
          }
          result.detailList.forEach((item) => {
            let targetNameList = [];
            INSPECTION_TARGET_OPTIONS.forEach((ele) => {
              if (item.targetList.includes(ele.value)) {
                targetNameList.push(ele.label);
              }
            });
            item.target = targetNameList.join(',');
          });
          this.tableInfo.list = result.detailList;
          this.initPersonListStr();
        }
      });
    },
    // 编辑报告
    editReport (row) {
      const { planId, supplierId, targetList, supplierClassify } = row;
      this.$router.push({
        name: 'addReport',
        query: { planId, supplierId, targetList, supplierClassify }
      });
    },
    // 查看报告
    viewReport (row) {
      const { planId, supplierId, targetList } = row;
      this.$router.push({
        name: 'viewReport',
        query: { planId, supplierId, targetList }
      });
    },
    // 取消
    handleCancel () {
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped>
.footer {
  margin-top: 10px;
}
.del-btn {
  float: right;
}
.add-btn {
  width: 100%;
  margin-bottom: 20px;
}
.box-card {
  margin-bottom: 10px;
}
</style>
